import React from 'react'
import { Row, Col, Card, Statistic, Progress, Table, Tag } from 'antd'
import { 
  ArrowUpOutlined, 
  ArrowDownOutlined,
  DatabaseOutlined,
  LinkOutlined,
  BranchesOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'

const Dashboard: React.FC = () => {
  // 模拟数据
  const chartData = [
    { name: '00:00', value: 400 },
    { name: '04:00', value: 300 },
    { name: '08:00', value: 600 },
    { name: '12:00', value: 800 },
    { name: '16:00', value: 700 },
    { name: '20:00', value: 500 },
  ]

  const recentConnections = [
    {
      key: '1',
      name: 'PostgreSQL -> Snowflake',
      status: 'running',
      lastSync: '2分钟前',
      records: '1,234',
    },
    {
      key: '2', 
      name: 'MongoDB -> BigQuery',
      status: 'error',
      lastSync: '15分钟前',
      records: '0',
    },
    {
      key: '3',
      name: 'API -> PostgreSQL',
      status: 'running',
      lastSync: '5分钟前',
      records: '567',
    },
  ]

  const columns = [
    {
      title: '连接名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'running' ? 'green' : 'red'}>
          {status === 'running' ? '运行中' : '错误'}
        </Tag>
      ),
    },
    {
      title: '最后同步',
      dataIndex: 'lastSync',
      key: 'lastSync',
    },
    {
      title: '记录数',
      dataIndex: 'records',
      key: 'records',
    },
  ]

  return (
    <div>
      <h1>仪表板</h1>
      
      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="活跃连接器"
              value={12}
              prefix={<DatabaseOutlined />}
              valueStyle={{ color: '#3f8600' }}
              suffix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="运行中连接"
              value={8}
              prefix={<LinkOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="数据管道"
              value={5}
              prefix={<BranchesOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日处理记录"
              value={1128}
              precision={0}
              valueStyle={{ color: '#cf1322' }}
              suffix={<ArrowDownOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        {/* 数据流量图表 */}
        <Col span={16}>
          <Card title="数据流量趋势" style={{ marginBottom: 24 }}>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={chartData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="value" stroke="#1890ff" strokeWidth={2} />
              </LineChart>
            </ResponsiveContainer>
          </Card>
        </Col>

        {/* 系统健康状态 */}
        <Col span={8}>
          <Card title="系统健康状态" style={{ marginBottom: 24 }}>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>CPU使用率</span>
                <span>45%</span>
              </div>
              <Progress percent={45} status="active" />
            </div>
            
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>内存使用率</span>
                <span>67%</span>
              </div>
              <Progress percent={67} status="active" />
            </div>
            
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>磁盘使用率</span>
                <span>23%</span>
              </div>
              <Progress percent={23} />
            </div>

            <div style={{ marginTop: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                <CheckCircleOutlined style={{ color: '#52c41a', marginRight: 8 }} />
                <span>Fluvio集群状态: 正常</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <ExclamationCircleOutlined style={{ color: '#faad14', marginRight: 8 }} />
                <span>数据库连接: 1个连接异常</span>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 最近连接活动 */}
      <Card title="最近连接活动">
        <Table 
          columns={columns} 
          dataSource={recentConnections} 
          pagination={false}
          size="small"
        />
      </Card>
    </div>
  )
}

export default Dashboard
